import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class TabBarExample extends StatefulWidget {
  const TabBarExample({Key? key}) : super(key: key);

  @override
  State<TabBarExample> createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('TabBarExample'),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_bike), text: '骑车'),
              Tab(icon: Icon(Icons.directions_boat), text: '乘船'),
              Tab(icon: Icon(Icons.directions_car), text: '开车'),
            ],
            isScrollable: true,
            indicatorColor: Colors.red,
            // 是否自动调整indicatorColor
            // automaticIndicatorColorAdjustment: true,
            // indicatorWeight: 10, // 指示器距离底部间隙
            indicatorPadding: EdgeInsets.only(bottom: 5),
            indicator: BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  Colors.orange,
                  Colors.green,
                ],
              ),
            ),
            // indicatorSize: TabBarIndicatorSize.label,
            labelColor: Colors.pink,
            labelStyle: TextStyle(
              backgroundColor: Colors.green,
              fontSize: 20,
            ),
            labelPadding:
                EdgeInsets.only(left: 60, right: 60, top: 0, bottom: 0),
            unselectedLabelColor: Colors.orange,
            unselectedLabelStyle: TextStyle(
              backgroundColor: Colors.pink,
            ),
            dragStartBehavior: DragStartBehavior.start,
            // 鼠标指针进入或悬停在鼠标指针上时的光标，针对 Flutter web 应用。
            mouseCursor: SystemMouseCursors.allScroll,
            // 检测到的手势是否应提供声音和/或触觉反馈，默认为 true
            enableFeedback: true,
            onTap: (index) {
              // 单击Tab时的回调
              if (kDebugMode) {
                print(index);
              }
            },
            // TabBar的滚动视图如何响应用户输入，
            // 例如，确定在用户停止拖动滚动视图后滚动视图如何继续动画。
            physics: NeverScrollableScrollPhysics(),
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.directions_bike),
            Icon(Icons.directions_boat),
            Icon(Icons.directions_car),
          ],
        ),
      ),
    );
  }
}
